<template>
    <div class="power-chart-container">
        <div ref="chartContainer" class="chart-container"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
    name: 'PowerConsumptionChart',
    data() {
        return {
            chart: null,
            // 模拟数据 - 24小时的电力消耗数据
            timeLabels: [
                '00:00', '01:00', '02:00', '03:00', '04:00', '05:00',
                '06:00', '07:00', '08:00', '09:00', '10:00', '11:00',
                '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',
                '18:00', '19:00', '20:00', '21:00', '22:00', '23:59'
            ],
            // 当前耗电数据 (kWh)
            currentData: [
                120000, 115000, 118000, 112000, 108000, 105000,
                82000, 78000, 85000, 88000, 92000, 95000,
                88000, 92000, 85000, 88000, 75000, 78000,
                82000, 85000, 78000, 75000, 72000, 70000
            ],
            // 去年同期数据 (kWh)
            lastYearData: [
                45000, 47000, 46000, 49000, 48000, 47000,
                50000, 52000, 51000, 53000, 52000, 51000,
                50000, 49000, 48000, 47000, 50000, 52000,
                55000, 57000, 56000, 58000, 57000, 56000
            ]
        }
    },
    mounted() {
        this.$nextTick(() => {
            setTimeout(() => {
                this.initChart()
            }, 500);
        })
        // 监听窗口大小变化
        window.addEventListener('resize', this.handleResize)
    },
    beforeDestroy() {
        if (this.chart) {
            this.chart.dispose()
        }
        window.removeEventListener('resize', this.handleResize)
    },
    methods: {
        initChart() {
            // 初始化图表
            this.chart = echarts.init(this.$refs.chartContainer)
            const option = {
                title: {
                    text: '单位：元',
                    textStyle: {
                        color: '#606266',       // 文字颜色
                        fontSize: 12,        // 字号
                        fontFamily: 'Arial'  // 字体
                    },
                },
                legend: {
                    show: true,
                    right: 10,
                    data: [
                        {name: '耗电项', icon: this.$svgIcon, itemHeight: 2,itemWidth:44},
                        {name: '去年同期', icon: this.$svgIcon, itemHeight: 2,itemWidth:24},
                    ],
                },
                grid: {
                    left: '30px',
                    right: '10px',
                    top: '40px',
                    bottom: '20px',
                    containLabel: false
                },
                xAxis: {
                    type: 'category',
                    data: this.timeLabels,
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        color: '#666',
                        fontSize: 12,
                        interval: 3, // 每4个显示一个标签
                        formatter: (value, index) => {
                            // 只显示特定的时间点
                            const showIndexes = [0, 4, 8, 12, 16, 20, 23]
                            return showIndexes.includes(index) ? value : ''
                        }
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#e6e6e6',
                            width: 1,
                            type: 'solid'
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    min: 0,
                    max: 150000,
                    interval: 25000,
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        color: '#666',
                        fontSize: 12,
                        formatter: (value) => {
                            if (value === 0) return '0'
                            return (value / 1000) + 'k'
                        }
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#e6e6e6',
                            width: 1,
                            type: 'solid'
                        }
                    }
                },
                series: [
                    {
                        name: '耗电项',
                        type: 'line',
                        data: this.currentData,
                        smooth: false,
                        symbol: 'none',
                        lineStyle: {
                            color: '#1890ff',
                            width: 2
                        },
                        itemStyle: {
                            color: '#1890ff'
                        }
                    },
                    {
                        name: '去年同期',
                        type: 'line',
                        data: this.lastYearData,
                        smooth: false,
                        symbol: 'none',
                        lineStyle: {
                            color: '#52c41a',
                            width: 2
                        },
                        itemStyle: {
                            color: '#52c41a'
                        }
                    }
                ],
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(0, 0, 0, 0.8)',
                    borderColor: 'transparent',
                    textStyle: {
                        color: '#fff',
                        fontSize: 12
                    },
                    formatter: (params) => {
                        let result = `时间: ${params[0].axisValue}<br/>`
                        params.forEach(param => {
                            const value = (param.value / 1000).toFixed(1) + 'k kWh'
                            result += `${param.seriesName}: ${value}<br/>`
                        })
                        return result
                    }
                }
            }

            this.chart.setOption(option)
        },
        handleResize() {
            if (this.chart) {
                this.chart.resize()
            }
        },
        // 更新数据的方法
        updateData(currentData, lastYearData) {
            if (currentData) this.currentData = currentData
            if (lastYearData) this.lastYearData = lastYearData

            if (this.chart) {
                this.chart.setOption({
                    series: [
                        {
                            data: this.currentData
                        },
                        {
                            data: this.lastYearData
                        }
                    ]
                })
            }
        }
    }
}
</script>

<style scoped>
.power-chart-container {
    width: 100%;
    height: 300px;
    background: #fff;
    padding: 16px;
}

.chart-container {
    width: 100%;
    height: 100%;
}

</style>
